// Copyright (c) [2021] [daifang]
// [Dcomponent] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2.
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
// See the Mulan PSL v2 for more details.
import { array, bool, func, object, string } from 'prop-types'
import { useState } from 'react'
import './style.less'
let icon = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-479328cb-417a-467c-9512-83793cb72c1e/cfa3e778-2f77-4acd-bc89-d7fa262f93c8.png'

function Card(props) {
  let { title, onClick, list, headerStyle, children, bodyStyle, canOC, open } = props
  let [iconName, seticonName] = useState(open?'zhankai':'unfolded-s')
  let [ocStatus, setOc] = useState(open)

  // card体
  let card = (<div className={`body`} style={bodyStyle}>
    {list.map((val, idx) => {
    return (
      <div key={val.title} className='body-person'>
        <div className='imgContainer'>
          <img style={val.imgStyle} src={val.icon} alt='' />
        </div>
        <span className='card-content'>
          <span className='title'>
            {val.title}
            ：
          </span>
          {val.content}
        </span>
      </div>
    )
  })}
  {children && children }
</div>)

  // card
  return (
    <>
      <div className={`d-card ${onClick?'pointer':'' }`}
        onClick={e => {
          if(onClick)
            onClick(e)
        }}
      >
        <div className='header' style={headerStyle}>
          <span className='title'>{title}</span>
          {canOC && <i className={`iconfont icon-${iconName}`} onClick={(e)=>{
            e.preventDefault()
            e.stopPropagation()
            setOc(!ocStatus)
            if(ocStatus){
              seticonName('unfolded-s')
            }else{
              seticonName('zhankai')
            }
          }}></i>}
        </div>
        {
          canOC ? ( ocStatus ? card : null ) : card
        }
      </div>
    </>
  )
}

// 类型校验
Card.propTypes = {
  title: string,// 标题
  onClick: func,// 点击事件
  list: array,// 列表数据
  headerStyle:object,// header的样式
  bodyStyle:object,// body的样式
  canOc:bool,// 是否能够关闭展开
  open:bool// 默认初始是打开
}
// 默认值
Card.defaultProps = {
  title: '这是标题', // 大标题
  onClick: () => { // 点击事件
    // Toast.info('点击事件')
  },
  list: [{
    icon: icon,
    title: '小标题',
    content: 'xxxx-xxxx-xxx',
    imgStyle: {
      width: '18px',
      height: '18px'
    } // 自定义图标宽高
  }]// 数据
}

export default Card
